<template>
  <div class="jsx-2182349918 home-clothing">
    <div class="jsx-548838181 clothing-top-entries">
      <div class="jsx-2946020097 entry">
        <div class="jsx-2946020097 content">
          <img
            src="https://asset.duozhuayu.com/clothing/new_arrivals_icon.png"
            alt=""
            class="jsx-2946020097 image"
          />
          <div class="jsx-2946020097">
            <h3 class="jsx-2946020097 title">上新</h3>
            <p class="jsx-2946020097 desc">今日上新 862 件</p>
          </div>
        </div>
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          xmlns="http://www.w3.org/2000/svg"
          class="Icon"
          style="width: 25px"
        >
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </div>
      <div class="jsx-548838181 divider"></div>
      <div class="jsx-2946020097 entry">
        <div class="jsx-2946020097 content">
          <img
            src="https://asset.duozhuayu.com/clothing/clothing_bargain_icon.png"
            alt=""
            class="jsx-2946020097 image"
          />
          <div class="jsx-2946020097">
            <h3 class="jsx-2946020097 title">特价</h3>
            <p class="jsx-2946020097 desc">1 折起</p>
          </div>
        </div>
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          xmlns="http://www.w3.org/2000/svg"
          class="Icon"
          style="width: 25px"
        >
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </div>
    </div>
    <div class="jsx-1633072295 root">

      <div v-for="(v,i) in newtext" :key="i">
        <div class="jsx-2754008456 container">
          <div class="jsx-2238513734 clothing-feed-section">
            <a href="/search/clothing/COS?brands=304983458940329376"
              ><div>
                <div class="Sticky" style="">
                  <h2 class="jsx-2238513734 title">{{v.title}}</h2>
                </div>
              </div></a
            >
            <p class="jsx-2238513734 intro">{{v.intro}}</p>
            <div class="jsx-1633072295 root">
              <div class="jsx-1295179214 clothing-feed-content">
                <div class="jsx-1295179214 item" v-for="(n,j) in v.content" :key="j">
                  <a
                    href="/products/627290154280820513?itemId=639013254286417552"
                    ><div
                      class="
                        jsx-2231478305
                        clothing-feed-item clothing_feed_items_item
                      "
                    >
                      <div
                        class="jsx-2421865174 root"
                        :style="n.bgimg"
                      ></div>
                      <div class="jsx-2231478305">
                        <div class="jsx-2231478305 title">{{n.titler}}</div>
                        <div class="jsx-2231478305 price">
                          <span class="jsx-2899740217 Price Price--bolder"
                            >{{n.Price}}<span
                              class="jsx-2899740217 Price--suffix"
                              style="font-size: 14px"
                              >起</span
                            ></span
                          >
                        </div>
                      </div>
                    </div></a
                  >
                </div>
              </div>
              <div
                class="jsx-1268065095 load-more-btn"
                style="
                  font-size: 14px;
                  font-weight: 500;
                  height: 20px;
                  line-height: 20;
                  color: rgb(73, 119, 73);
                  margin: 25px 0px 10px;
                "
              >
                展开更多<svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  xmlns="http://www.w3.org/2000/svg"
                  class="Icon"
                  width="18"
                  height="18"
                  style="margin-left: 0px"
                >
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     // 设置钩子函数 调用actions触发异步请求 触发actions的RECOMMEND方法
  mounted(){
        this.$store.dispatch("CLOTH");
  },
  computed:{
    // 从vuex中取出数据
    newtext(){
      return  this.$store.state.homeCloth.data
    }
  }
};
</script>

<style>
.home-clothing.jsx-2182349918 {
    padding: 0px 15px;
}
.clothing-top-entries.jsx-548838181 {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(242, 242, 242);
}
.entry.jsx-2946020097 {
    display: flex;
    flex: 1 1 0%;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
}
.content.jsx-2946020097 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.image.jsx-2946020097 {
    width: 26px;
    margin-right: 5px;
}
.title.jsx-2946020097 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}
.desc.jsx-2946020097 {
    font-size: 13px;
    font-weight: 500;
    color: rgb(102, 102, 102);
}
.divider.jsx-548838181 {
    margin: 0px 15px;
    width: 1px;
    background-color: rgb(242, 242, 242);
}

.root.jsx-1633072295 {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}
.container.jsx-2754008456 {
    position: relative;
}
.clothing-feed-section.jsx-2238513734 {
    margin-top: 20px;
    font-size: 14px;
    font-weight: normal;
}
.title.jsx-2238513734 {
    font-size: 16px;
    font-weight: 900;
    height: 32px;
    line-height: 32px;
    padding: 0px 10px;
    color: rgb(255, 255, 255);
    background-color: rgb(73, 119, 73);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 10px solid rgb(255, 255, 255);
}
.intro.jsx-2238513734 {
    margin-bottom: 5px;
}
.root.jsx-1633072295 {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}
.clothing-feed-content.jsx-1295179214 {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.item.jsx-1295179214 {
    width: calc((100% - 15px) / 2);
    margin-top: 15px;
}
.clothing-feed-item.jsx-2231478305 {
    text-align: center;
}
.root.jsx-2421865174 {
    display: flex;
}
.root.jsx-2421865174::before {
    content: "";
    padding-top: 100%;
}
.title.jsx-2231478305 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.price.jsx-2231478305 {
    font-size: 15px;
    margin-top: 4px;
}
.Price--bolder {
    font-weight: 700;
}
.Price--bolder .Price--suffix {
    font-weight: 700;
    margin-left: 3px;
}
.load-more-btn.jsx-1268065095 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 50px;
    font-size: 14px;
    font-weight: 400;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
}

</style>